import { observer } from 'mobx-react';
import StatisticStore from '../../../stores/StatisticStore';
import { Icon_Search } from '../../../images/icons/Search';
import { useHistory } from 'react-router';
import '../StockIndex.scss';
import eventBus from '../../../utils/eventBus';

export const StockSearchInput = observer(() => {
    let history = useHistory();
    return (
        <div className='search-wrapper'>
            <div className="icon-wrapper" onClick={() => {
                if (StatisticStore.symbols.length > 0) {
                    if (window.location.pathname.indexOf("stockDetail") > -1) {
                        (window as any).stockSearch(StatisticStore.symbols[0].symbol);
                        StatisticStore.symbols = [];
                    } else {
                        history.push(`/stockDetail/${StatisticStore.symbols[0].symbol}`);
                        StatisticStore.symbols = [];
                    }

                }
            }}>
                <img src={Icon_Search} alt="" className="icon" />
            </div>
            <input type="text" placeholder='股票代码，如APT' onSubmit={(v) => {
                if (StatisticStore.symbols.length > 0) {
                    if (window.location.pathname.indexOf("stockDetail") > -1) {
                        (window as any).stockSearch(StatisticStore.symbols[0].symbol);
                        StatisticStore.symbols = [];
                    } else {
                        history.push(`/stockDetail/${StatisticStore.symbols[0].symbol}`);
                        StatisticStore.symbols = [];
                    }

                }
            }}

                onChange={(v) => StatisticStore.onSearchInputChange(v.target.value)} />
            <div className="list">
                {StatisticStore.symbols.map((s, i) => <div key={i} className="item" onClick={() => {
                    if (window.location.pathname.indexOf("stockDetail") > -1) {
                        (window as any).stockSearch(s.symbol);
                        StatisticStore.symbols = [];
                    } else {
                        StatisticStore.symbols = [];
                        history.push(`/stockDetail/${s.symbol}`);
                    }
                }}>{s.symbol} ({s.name})</div>)}

            </div>
        </div>

    );
})


